<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>产品分类管理</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入axios -->
		<script src="../js/axios.js"></script>
		<script src="../js/qs.js"></script>
		<!-- 导入jquery -->
		<script src="../js/jquery.min.js"></script>
		<style type="text/css">
		.loading{
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: white;
        top: 0px;
        left: 0px;
        z-index: 100;
}	
.loading .bigpic{
    width: 104px;
    height: 104px;
    background-image: url("../imgs/loading.gif") ;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  </style>
  
<script>
	/* document.addEventListener("readystatechange",function(){
		//对象尚未初始化
		if(document.readyState=="uninitialized"){
			console.log("readystatechange-uninitialized");
		}
		//对象正在加载
		if(document.readyState=="loading"){
			console.log("readystatechange-loading");
		}
		//对象加载数据完成
		if(document.readyState=="loaded"){
			console.log("readystatechange-loaded");
		}
		//可以操作对象，但还没完全加载
		if(document.readyState=="interactive"){
			console.log("readystatechange-interactive");
		}
		//对象已经加载完毕
	     if (document.readyState == "complete") {
	       console.log("readystatechange-complete");
	      }
	  }); */
</script>
	</head>

<body>
	<div id="bigbox">
	
		<div class="custom-tree-container">
		  <div class="block">
		    <p>使用 render-content</p>
		    <el-tree :data="data4" show-checkbox="" node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent">
		    </el-tree>
		  </div>
		</div>
	</div>


	<script type="text/jscript">
	let id = 1000;
	
	  var Main = {
	    data() {
	      const data = [{
	        id: 1,
	        label: '一级 1',
	        children: [{
	          id: 4,
	          label: '二级 1-1',
	          children: [{
	            id: 9,
	            label: '三级 1-1-1'
	          }, {
	            id: 10,
	            label: '三级 1-1-2'
	          }]
	        }]
	      }, {
	        id: 2,
	        label: '一级 2',
	        children: [{
	          id: 5,
	          label: '二级 2-1'
	        }, {
	          id: 6,
	          label: '二级 2-2'
	        }]
	      }, {
	        id: 3,
	        label: '一级 3',
	        children: [{
	          id: 7,
	          label: '二级 3-1'
	        }, {
	          id: 8,
	          label: '二级 3-2'
	        }]
	      }];
	      return {
	        data4: JSON.parse(JSON.stringify(data))
	      }
	    },
	
	    methods: {
	      append(data) {
	        const newChild = { id: id++, label: 'testtest', children: [] };
	        if (!data.children) {
	          this.$set(data, 'children', []);
	        }
	        data.children.push(newChild);
	      },
	
	      remove(node, data) {
	        const parent = node.parent;
	        const children = parent.data.children || parent.data;
	        const index = children.findIndex(d => d.id === data.id);
	        children.splice(index, 1);
	      },
	
	      renderContent(h, { node, data, store }) {
      return (
      <span class="custom-tree-node"> 
         <span>{node.label}</span>
         <span>
           <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
           <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
         </span>
      </span>
			);
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#bigbox')
</script>
</body>
</html>